<template>
  <div class="background" :style="backgroundStyle" @mousemove="handleMouseMove"></div>
  <div class="title">八爪鱼二手交易</div>
  <div id="app" class="container">
      <div class="form-section">
        <form @submit.prevent="login">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username" required>
            <label for="password">密码</label>
            <input type="password" id="password" v-model="password" required>
            <button type="submit" @click="handleLogin">登录</button>
            <button class="register-button" @click="handleRegiter">注册</button>
        </form>
       
      </div>
    <div class="girl" :style="girlStyle" @mousemove="handleMouseMove"></div>
  </div>
  <div class="line-box">
    <span
      class="line-item"
      v-for="(item, index) in lineList"
      :key="index"
      :style="{
        '--c1': item.c1, //颜色1
        '--c2': item.c2, //颜色2
        '--t': item.t,   //top
        '--l': item.l,   //left
        '--d': item.d,   //
        '--r': item.r,
        '--duration': item.duration, //持续时间
        '--delay': item.delay,       //延迟时间
      }"
    ></span>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { globalState } from '../global.js';

const lineList = ref(
  Array.from({ length: 30 }).map((_, index) => ({
      c1: index === 9 ? '#DA70D6' : Math.random() > 0.5 ? '#69E4F6' : '#FED258',
      c2: index === 9 ? '#FF69B4' : Math.random() > 0.5 ? '#69e4f600' : 'rgba(254,210,88,0)',
      t: `${Math.random() * 100}vh`,
      l: `${Math.random() * 100}vw`,
      d: Math.floor(Math.random() * 6),
      r: Math.random() * 360,
      duration: `${Math.random() * 3 + 2}s`, // 随机时间2-5s
      delay: `${Math.random() * 5}s`, // 随机延迟0-5s
  }))
  );

  const mouseX = ref(0);
  const mouseY = ref(0);

  const backgroundStyle = ref({
      transform: '',
  });

  const girlStyle = ref({
      transform: '',
  });

      // 处理鼠标移动事件
  function handleMouseMove(event) {
      mouseX.value = (event.clientX / window.innerWidth) * 360 - 180;
      mouseY.value = (event.clientY / window.innerHeight) * 180 - 90;
      backgroundStyle.value.transform = `translate(${mouseX.value / 15}px, ${mouseY.value / 15}px)`;
      girlStyle.value.transform = `translate(${-mouseX.value / 15}px, ${-mouseY.value / 15}px) rotateY(180deg)`;
  }

  onMounted(() => {
      document.addEventListener('mousemove', handleMouseMove);
  });

  onUnmounted(() => {
      document.removeEventListener('mousemove', handleMouseMove);
  });

export default {

  data() {
    return {
      username: '',
      password: '',
      lineList,
      backgroundStyle,
      girlStyle,
      handleMouseMove
    };
  },
  methods: {
    handleLogin() {
      const username = this.username;
      const password = this.password;
      const a = "http://localhost:8080/login?";
      const con = "&";
      const que3 = "username=";
      const que2 = "password="; 
      const test = a + que3 + username + con + que2 + password;
      if(this.username=="admin" && this.password=="123456"){
        globalState.username = username;
        this.$router.push('/admin')
      }
      axios.post(test).then(response=>{
        if(response.data&&username!="admin"&&password!="123456"){
          globalState.username = username;
          this.$router.push("/mainpage")
          const currentTime = new Date().toISOString();
          const data = {
          date: currentTime,
          text:'用户'+ globalState.username +'登录了八爪鱼二手平台'
          }
          axios.post('http://localhost:8080/api/log/logmes', data);   
        }else if(!response.data&&username!="admin"&&password!="123456"){
           alert("账号或密码错误")
        }
      })
       },
        handleRegiter(){
          this.$router.push("/register")
        }
  
     }
    }
</script>

<style scoped>
  

  .title {
      position: fixed;
      top: 20%;
      left: 10%;
      font-size: 9vh;
      font-weight: bold;
      background: linear-gradient(93.23deg, #F778BA 2.35%, #79C0FF 76.99%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 1;
  }


  .background {
      position: fixed;
      top: -3%;
      left: -3%;
      width: 105%;
      height: 105%;
      background: url('../assets/img/background.png') center/cover;
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
      transition: transform 0.1s;
  }

  .girl {
      position: fixed;
      bottom: 0;
      left: 60%;
      width: 100%;
      height: 100%;
      background: url('../assets/img/girl.png') no-repeat right bottom/contain;
      scale: 1.1;
      z-index: -1;
  }

  .container {
  position: fixed;
  background: linear-gradient(90deg, rgba(131,58,180,0.5) 0%, rgba(253,156,29,0.5) 100%);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 35%;
  min-height: 10vh; 
  width: 30%;
  height: 40%;
  left: 10%;
  bottom: 15%; 
  }

  .form-section {
    width: 80%;
    margin: auto;
    padding: 10px;
    padding-top: 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .form-section label {  
      font-weight: bold;
      font-size: 2vh;
      color: #ffffff;
  }
  .form-section input {
      width: 100%;
      padding: 1vh;
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      font-size: 2.5vh;
  }
  .form-section button {
      margin-top: 30px;
      padding: 2vh;
      background: #f7a81b;
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 2.8vh;
      cursor: pointer;
      margin-bottom: 0;
  }
  .form-section button:hover {
      background: linear-gradient(93.23deg, #F778BA 2.35%, #79C0FF 76.99%);
  }

  .form-section .register-button {
  background: #e8075a; 
  margin-top: 30vx;
  position: relative;
  left: 18vw;
      padding: 2vh;
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 1.5vw;
      cursor: pointer;
      margin-bottom: 0;
      width:5.5vw;
      height:4.5vw;
}

  @media (max-width: 768px) {
      .container {
          flex-direction: column;
          width: 90%;
      }
      .form-section {
          width: 100%;
          padding: 20px;
      }
      .form-section .register-button{
        width: 100%;
        padding: 20px;
      }
  }

  .line-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* 确保流星不会阻挡其他元素的交互 */
  z-index: -1;
  }

  .line-item {
  width: 2px;
  height: 80px;
  background: linear-gradient(0deg, var(--c1) 0%, var(--c2) 100%);
  position: absolute;
  top: var(--t);
  left: var(--l);
  transform: rotate(45deg);
  opacity: 0;
  animation: shank var(--duration) linear infinite; /* 使用随机持续时间 */
  animation-delay: var(--delay); /* 使用随机延迟 */
  }

  .line-item::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c1);
  filter: blur(1.8px);
  box-shadow: 0px -1px -1px 5px var(--c2);
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  }

  @keyframes shank {
  0% {
      transform: rotate(45deg) translateY(-200px) scale(0.5); /* 调整初始位置 */
      opacity: 0;
  }
  70% {
      opacity: 1;
      transform: rotate(45deg) translateY(200px) scale(1.1); /* 调整中间位置 */
  }
  100% {
      transform: rotate(45deg) translateY(400px) scale(0.5); /* 调整结束位置 */
      opacity: 0;
  }
  }
</style>
